<template>
  <div class="event-type-popover">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <n-input
        v-model:value="searchKeyword"
        placeholder="搜索事件类型..."
        size="small"
        clearable
      >
        <template #prefix>
          <n-icon :size="16">
            <Search />
          </n-icon>
        </template>
      </n-input>
    </div>

    <!-- 事件类型网格 -->
    <div class="event-types-grid">
      <n-scrollbar style="max-height: 300px">
        <div class="grid-container">
          <div
            v-for="eventType in filteredEventTypes"
            :key="eventType.id"
            class="event-type-item"
            @click="handleSelectEventType(eventType)"
          >
            <div class="icon-wrapper" :style="{ backgroundColor: eventType.color }">
              <n-icon :size="24">
                <component :is="getIcon(eventType.icon)" />
              </n-icon>
            </div>
            <div class="event-type-name">{{ eventType.name }}</div>
          </div>
        </div>
      </n-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { 
  Search,
  Restaurant,
  Analytics,
  Create,
  Fitness,
  Book,
  Calendar,
  Heart,
  Briefcase
} from '@vicons/ionicons5'
import type { EventType } from '@/types'

// Props
interface Props {
  eventTypes: readonly EventType[]
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  select: [eventType: EventType]
}>()

// 搜索关键词
const searchKeyword = ref('')

// 图标映射
const iconMap: Record<string, any> = {
  restaurant: Restaurant,
  analytics: Analytics,
  create: Create,
  fitness: Fitness,
  book: Book,
  calendar: Calendar,
  heart: Heart,
  briefcase: Briefcase
}

// 获取图标组件
const getIcon = (iconName: string) => {
  return iconMap[iconName] || Create
}

// 过滤后的事件类型
const filteredEventTypes = computed(() => {
  if (!searchKeyword.value) {
    return props.eventTypes
  }
  
  const keyword = searchKeyword.value.toLowerCase()
  return props.eventTypes.filter(type => 
    type.name.toLowerCase().includes(keyword) ||
    type.name_en.toLowerCase().includes(keyword) ||
    type.description.toLowerCase().includes(keyword)
  )
})

// 选择事件类型
const handleSelectEventType = (eventType: EventType) => {
  emit('select', eventType)
}
</script>

<style scoped>
.event-type-popover {
  width: 320px;
  padding: 12px;
}

.search-bar {
  margin-bottom: 12px;
}

.event-types-grid {
  width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 4px;
}

.event-type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #f5f5f5;
}

.event-type-item:hover {
  background: #e8e8e8;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.event-type-item:active {
  transform: translateY(0);
}

.icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-type-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  max-width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .event-type-popover {
    width: 280px;
  }
  
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .icon-wrapper {
    width: 44px;
    height: 44px;
  }
  
  .event-type-name {
    font-size: 11px;
  }
}
</style>

